import { defineComponent, ref } from "vue";
import { onMounted } from "vue-demi";

export default defineComponent({
	name: "ProcessBar",
	props: { rate: Number, defaultColor: String, activeColor: String, cellWidth: Number },
	setup() {
		const dom = ref();
		const totalWidth = ref(0);
		onMounted(() => {
			setTimeout(() => {
				totalWidth.value = dom.value.clientWidth;
			}, 500);
		});
		return (props: { rate: number; activeColor: string; defaultColor: string; cellWidth: number }) => (
			<div className={"w-full h-full"}>
				<div className={"w-full h-full flex flex-row"} ref={dom}>
					{totalWidth.value == 0
						? null
						: getProcessRow(props.rate, props.activeColor, props.defaultColor, props.cellWidth, totalWidth.value)}
					{/*{getProcessCell("#fff", 10)}*/}+{" "}
				</div>
			</div>
		);
	}
});

// (rate,activeColor,defaultColor)
const getProcessRow = (rate: number, activeColor: string, defaultColor: string, cellWidth: number, totalWidth: number) => {
	let cellNum = Math.floor(totalWidth / cellWidth);
	let activeNum = Math.floor((rate / 100) * cellNum);
	return new Array(cellNum).fill(0).map((_value, index) => {
		return getProcessCell(index + 1 > activeNum ? defaultColor : activeColor, cellWidth);
	});
};

// rate 百分制

const getProcessCell = (color: string, width: number) => {
	const defaultCellStyle = {
		"border-radius": "2px",
		width: width + "px",
		height: "100%",
		"margin-right": "2px",
		background: color
	};
	return <div style={defaultCellStyle}></div>;
};
